<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            /* 添加此行以消除页面的默认边距 */
        }

        .comic-container {
            margin-bottom: -1px;
            /* 负边距用于消除间隔 */
            font-size: 0;
            /* 添加此行以消除行内块元素之间的空白间隙 */
        }

        .comic-image {
            
            max-width: 100%;
            height: auto;
            vertical-align: top;
            /* 添加此行以在行内块元素中垂直居中图片 */
        }
    </style>
    <script type="text/javascript">
        //json文件模板[{"dir": "第1话-","pictrue": ["1_00.jpg","1_01.jpg"]}]
        //dirs=[{"dir": "第1话-","pictrue": ["1_00.jpg","1_01.jpg"]},
        //{"dir": "第2话-","pictrue": ["1_00.jpg","1_01.jpg"]}];
        dirs = [];

        // 加载时自动读取json文件
        window.onload = function () {
            var url = "/static/man_hua/works/{{name}}/0_{{name}}.json"
            var request = new XMLHttpRequest();
            request.open("get", url);
            request.send(null);
            request.onload = function () {
                if (request.status == 200) {
                    var json = JSON.parse(request.responseText);
                    dirs = json
                    removeInput();
                    load();
                }
            }
        }

        //读取文件
        function showPreview() {
            var files = document.getElementById('files');
            var file = files.files[0];
            //alert(1);
            if (!!file) {
                var fr = new FileReader();
                //alert(2);
                fr.readAsText(file);
                //alert(3);
                fr.onload = function () {
                    dirs = JSON.parse(this.result);
                    removeInput();
                    load();
                }
            };
        }

        function load() {
            reLoad(0);
            setCatalogue();
        }

        //清除input
        function removeInput() {
            var input1 = document.getElementById("files");
            input1.remove();
        }

        //设置目录
        function setCatalogue() {
            //设置select高宽
            var selectStyle = "font-size:20px;width:300px;height:70px;border:1px solid #ccc;";
            var div1 = document.getElementById("selectDiv1");
            var select1 = document.createElement("select");
            select1.id = "select1";
            select1.style = selectStyle;
            select1.onchange = function () {
                change(select1.id);
            };

            var div2 = document.getElementById("selectDiv2");
            var select2 = document.createElement("select");
            select2.id = "select2";
            select2.style = selectStyle;
            select2.onchange = function () {
                change(select2.id);
            };

            for (var i in dirs) {
                var option1 = document.createElement("option");
                option1.value = i.toString();
                option1.innerHTML = dirs[i]["dir"];

                var option2 = document.createElement("option");
                option2.value = i.toString();
                option2.innerHTML = dirs[i]["dir"];

                select1.appendChild(option1);
                select2.appendChild(option2);
            }

            div1.appendChild(select1);
            div2.appendChild(select2);
        }

        //清除图片
        function creadImg() {
            var divs = document.getElementById("parDiv");
            if (divs != null) {
                divs.remove();
            }
        }

        //重新加载图片
        function reLoad(num) {
            //设置标题
            var title = document.getElementsByTagName("title")[0];
            title.innerText = dirs[num]["dir"];
            var pictureBox = document.getElementById("pictureBox");
            var parDiv = document.createElement("div");
            parDiv.id = "parDiv";
            // parDiv.style=""

            for (var x in dirs[num]["pictrue"]) {
                //添加img标签
                var div = document.createElement("div");
                var img = document.createElement("img");
                div.className = "comic-container"
                img.src = "/static/man_hua/works/{{name}}/" + dirs[num]["dir"] + '/' + dirs[num]["pictrue"][x];
                img.className = "comic-image"
                div.appendChild(img);
                parDiv.appendChild(div);
            }

            pictureBox.appendChild(parDiv);
        }

        function change(idName) {
            var select1 = document.getElementById(idName);
            if (idName == "select1") {
                var obj2 = document.getElementById("select2")
                obj2.value = select1.value
            } else {
                var obj1 = document.getElementById("select1")
                obj1.value = select1.value
            }
            creadImg();
            reLoad(parseInt(select1.value));
            //网页回到top
            document.documentElement.scrollTop = 0;
            //reTop();
        }

        var reTop = function () {
            //定时执行
            timer = setInterval(function () {
                var backTop = getScrollTop();
                var speedTop = backTop / 10;
                //修改当前视口的数值，产生向上活动的效果
                setScrollTop(backTop - speedTop);
                if (backTop == 0) {
                    //结束函数执行
                    clearInterval(timer);
                }
            }, 30);
        };
        //获取当前视口的顶端数值
        var getScrollTop = function () {
            var sTop;
            if (document.compatMode == "BackCompat") {
                sTop = document.body.scrollTop;
            }
            else {
                //document.compatMode == "CSS1Compat"
                sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
            }
            return sTop;
        };
        //设置当前视口的顶端数值
        var setScrollTop = function (top) {

            if (document.compatMode == "BackCompat") {
                document.body.scrollTop = top;
            }
            else {
                if (document.documentElement.scrollTop == 0) {
                    document.body.scrollTop = top;
                } else {
                    document.documentElement.scrollTop = top;
                }
            }
        }

    </script>
</head>

<!-- onload="load()" -->

<body>
    <!-- 添加返回首页按钮 -->
    <div>
        <p>
            <a href="/man_hua">
                <button type="button" style="height:80px;width:200px;">返回首页</button>
            </a>
        </p>
    </div>
    <!-- 添加头部选择框 -->
    <div id="selectDiv1">

        <!-- 添加文件选择框 -->
        <div>
            <input type="file" id="files" accept=".json" onchange="showPreview()" />
        </div>

    </div>
    <div id="pictureBox" style="padding:20% 0">
        <!-- 图片 -->
    </div>

    <div>
        <p></p>
    </div>
    <!-- 添加尾部选择框 -->
    <div id="selectDiv2">
    </div>
    <!-- 添加返回首页按钮 -->
    <div>
        <p>
            <a href="/man_hua">
                <button type="button" style="height:80px;width:200px;">返回首页</button>
            </a>
        </p>
    </div>
</body>

</html>